<template>

	<view>
		<LuckyWheel
		  ref="myLucky"
		  width="600rpx"
		  height="600rpx"
		  :blocks="blocks"
		  :prizes="prizes"
		  :buttons="buttons"
		  :defaultStyle="defaultStyle"
		  @start="startCallBack"
		  @end="endCallBack"
		/>
	</view>

</template>

<script>
import moment from 'moment';//引入moment依赖
import md5 from 'js-md5';//引入md5依赖
import authenticate from '../../utils/authenticate.js';//引入鉴权方法
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
	import {
		memberGet
	} from '../../api/index.js'//引入会员详情查询接口
	const miniProgramAppid = 'wx95df8d135409ab43';
	const secret = 'ce525ecb58eebf4aa11170b7bd3a3839';
	import {
			changePoint
		} from '../../api/index.js';
	let timeStamp = moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
	export default {
		components: { LuckyWheel },
		data () {
			return {
				memberId:'',
				openid: '',
				code: '',
				nickName: '',
				gainedPoint: '',
				isRegister: false,
				blocks: [{ padding: '13px', background: '#00aa00' }],
				prizes: [
				  { fonts: [{ text: '1积分', top: '10%' }], background: '#0cdba9' },
				  { fonts: [{ text: '2积分', top: '10%' }], background: '#fff7a2' },
				  { fonts: [{ text: '3积分', top: '10%' }], background: '#0cdba9' },
				  { fonts: [{ text: '4积分', top: '10%' }], background: '#fff7a2' },
				  { fonts: [{ text: '5积分', top: '10%' }], background: '#0cdba9' },
				  { fonts: [{ text: '6积分', top: '10%' }], background: '#fff7a2' },
				  { fonts: [{ text: '7积分', top: '10%' }], background: '#0cdba9' },
				  { fonts: [{ text: '8积分', top: '10%' }], background: '#fff7a2' },
				],
				buttons: [
				  { radius: '50px', background: '#55aa7f' },
				  { radius: '45px', background: '#aaff7f' },
				  {
					radius: '40px', background: '#0cdba9',
					pointer: true,
					fonts: [{ text: '点击\n抽奖', top: '-20px' }]
				  },
				],
			}
		},
		methods: {
			  // 点击抽奖按钮触发回调
			startCallBack () {
				// 先开始旋转
				this.$refs.myLucky.play()
				// 使用定时器来模拟请求接口
				setTimeout(() => {
				  const index = Math.floor(Math.random() * 8);
				  // 调用stop停止旋转并传递中奖索引
				  this.$refs.myLucky.stop(index);
				  this.num = index + 1;
				  console.log(this.num,'num')
				}, 3000)
			  },
			  // 抽奖结束触发回调
			endCallBack (prize) {
				this.prize = prize.name;
				console.log('奖品',this.prize);
				this.update();
				uni.showToast({
					title:'恭喜获得积分！'
				})
			  },
					  
			
			
			//变更积分
			update (){
				const memberid = uni.getStorageSync('memberId');
				changePoint({
					createTime: timeStamp,
					traceId: new Date(),
					expireTime: '2025-12-31 23:59:59',
					description: '测试',
					point: this.num,
					changeType: "SEND",
					changeMode: "ACTIVITY_GIFT",
					memberId: memberid
				})
				.then(res => {
					console.log(res.data);
				})
			}
		}
	}
</script>
<style lang="scss">
	.user-container {
		overflow: hidden;
		font-family: HYQihei 40S;
		.card {
			margin: 15px;
			padding: 0 10px;
			box-shadow: 0px 0px 3px 1px rgb(150 141 141 / 8%);
			border: 1px solid #EBEEF5;

			.card_header {
				display: flex;
				border-bottom: 1px #EBEEF5 solid;
				flex-direction: row;
				align-items: center;
				padding: 10px;
				overflow: hidden;

				.card_header-avatar {
					width: 40px;
					height: 40px;
					overflow: hidden;
					border-radius: 5px;
					margin-right: 10px;

					.card_header-avatar-image {
						flex: 1;
						width: 40px;
						height: 40px;
					}
				}

				.card_header-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					overflow: hidden;

					.card_header-content-title {
						padding: 10px 0px 10px 10px;
						font-size: 15px;
						color: #3a3a3a;
					}

					.card_header-content-subtitle {
						padding: 0px 0px 0px 10px;
						font-size: 12px;
						margin-top: 5px;
						color: #909399;
					}
				}

				.card_header-extra {
					font-size: 12px;
					color: #909399;
				}
			}
		}
	}
</style>